<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-19 17:10:54
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-08-23 11:48:17
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\label.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="labelCom">
    <el-dialog
      title="标签"
      :visible.sync="open"
      width="25%"
      :before-close="close"
      :close-on-click-modal="true"
      :modal="false"
    >
      <div v-if="active === '1'">
        <div class="labelComMain">
          <p class="titleGrounp" style="margin: 6px 0">默认分组</p>
          <div>
            <el-tag
              v-for="item in list"
              @click="handleTagClick(item)"
              :key="item.id"
              :style="{
                color: '#fff',
                marginRight: '8px',
                marginBottom: '6px',
                background: item.color || 'rgb(245, 34, 45)',
                border: 'none',
                cursor: 'pointer',
              }"
              >{{ item.tag }}
              <span style="display: inline-block; width: 14px"
                ><i
                  class="el-icon-check"
                  v-show="ids.includes(item.id)"
                ></i></span
            ></el-tag>
            <el-tag
              style="
                cursor: pointer;
                width: 70px;
                text-align: center;
                background: #fff;
                border: 1px dotted #1890ff;
                border-radius: 20px;
              "
              @click="handleAddTags"
              ><i class="el-icon-plus"></i
            ></el-tag>
          </div>
        </div>
      </div>
      <div v-if="active === '2'">
        <div class="labelComMain">
          <el-form ref="form" :model="form" label-width="60px">
            <el-form-item label="标签名">
              <el-input v-model="form.tag" placeholder="请输入标签名" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="标签组">
              <el-select v-model="form.group" style="width: 100%">
                <el-option label="默认分组" value="默认分组"></el-option>
              </el-select>
            </el-form-item>
            <div class="tagBacColor">
              <span
                v-for="item in colorList"
                :key="item"
                :style="{ background: item || '#409eff' }"
                @click="currentColor = item"
                ><i
                  class="el-icon-check"
                  style="color: #fff"
                  v-show="currentColor === item"
                ></i
              ></span>
            </div>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="active === '1'">
        <el-button type="primary" @click="handleTagSubmit(chooseTagList)"
          >确 定</el-button
        >
      </span>
      <span slot="footer" class="dialog-footer" v-if="active === '2'">
        <el-button @click="() => (active = '1')">取 消</el-button>
        <el-button type="primary" @click="handleAddTagSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTagList, addTag } from "@/api/task/task.js";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    handleTagSubmit: {
      type: Function,
      default: () => {},
    },
    viewTagList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: [],
      colorList: [
        "rgb(245, 34, 45)",
        "rgb(250, 84, 28)",
        "rgb(250, 173, 20)",
        "rgb(19, 194, 194)",
        "rgb(82, 196, 26)",
        "rgb(24, 144, 255)",
        "rgb(47, 84, 235)",
        "rgb(114, 46, 209)",
      ],
      chooseTagList: [],
      ids: [],
      active: "1",
      form: { group: "默认分组" },
      currentColor: "rgb(245, 34, 45)",
    };
  },
  methods: {
    async handleAddTagSubmit() {
      if (!this.form.tag) return this.$message.error("请输入标签名");
      const res = await addTag({ ...this.form, color: this.currentColor });
      if (res.code === 200) {
        this.$message.success("新增成功");
        this.active = "1";
        this.getList();
      }
    },
    handleAddTags() {
      this.active = "2";
    },
    handleTagClick(row) {
      if (this.chooseTagList.includes(row)) {
        this.chooseTagList = this.chooseTagList.filter(
          (item) => item.id !== row.id
        );
        this.ids = this.ids.filter((item) => item !== row.id);
        return;
      }
      this.chooseTagList.push(row);
      this.ids.push(row.id);
    },
    async getList() {
      const res = await getTagList();
      this.list = res.data;
    },
  },
  async mounted() {
    await this.getList();
    if (this.viewTagList?.length) {
      this.list?.forEach((item) => {
        this.viewTagList?.forEach((val) => {
          if (val.id == item.id) {
            this.chooseTagList.push(item);
            this.ids.push(item.id);
          }
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.labelCom {
  ::v-deep .el-dialog__body {
    padding-top: 0px;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  .labelComMain {
  }
  .tagBacColor {
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      margin-right: 8px;
      cursor: pointer;
    }
  }
}
</style>